<template>
  <div class="wrapper">
    <div class="subscribe">
      <mu-form :model="optionsTwo" class="mu-demo-form">
        <mu-form-item>
          <mu-text-field class="white-input" v-model="optionsTwo.subscribe" placeholder="订阅主题"></mu-text-field>
          <div class="flex-between flex-align-center port-box">
            <mu-text-field
              class="port-input white-input"
              v-model="optionsTwo.QOS"
              placeholder="服务质量"
            ></mu-text-field>
            <mu-button flat class="connect-btn" @click="subscribe()">订阅</mu-button>
          </div>
          <mu-text-field
            class="white-input"
            v-model="optionsTwo.subscribeMsg"
            placeholder="订阅信息接收窗口"
            disabled
            multi-line
            :rows="6"
            full-width
          ></mu-text-field>
          <mu-text-field
            class="white-input"
            v-model="optionsTwo.publishMsg"
            placeholder="消息发布窗口"
            multi-line
            :rows="1"
            full-width
          ></mu-text-field>
        </mu-form-item>
      </mu-form>
      <div class="connect flex-center">
        <mu-button large class="connect-btn end" @click="end()">断开</mu-button>
        <mu-button large class="connect-btn" @click="publish()">发布</mu-button>
      </div>
      <div class="control">
        <div class="arrow" @click="top()">
          <img src="../assets/image/top.png" alt>
        </div>
        <div class="flex-between">
          <div class="arrow" @click="left()">
            <img src="../assets/image/left.png" alt>
          </div>
          <div class="arrow" @click="stop()">
            <img src="../assets/image/stop.png" alt>
          </div>
          <div class="arrow" @click="right()">
            <img src="../assets/image/right.png" alt>
          </div>
        </div>
        <div class="arrow" @click="bottom()">
          <img src="../assets/image/bottom.png" alt>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url("../assets/less/index.less");
.subscribe {
  background-color: #039588;
  opacity: 0.6;
  padding: 0.2rem 0.5rem;
}
.button {
  color: #fff;
  font-size: 0.26rem;
}
.port-box {
  width: 100%;
}
.port-input {
  width: 40%;
}
.info-box {
  p {
    text-align: center;
    color: #fff;
    line-height: 0.8rem;
  }
}
.white-input {
  // background: #fff;
  // color: #222;
  border: 0;
  border-radius: 3px;
  margin: 10px 0 0;
}
.control {
  margin-top: 5px;
}
.arrow {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
<script>
import mqtt from "mqtt";
import api from '../../assets/js/api'
export default {
  data() {
    return {
      form: {},
      options: {},
      optionsTwo: {
        subscribe: "hello", // 主题
        subscribeMsg: "", // 主题消息
        QOS: 0, // 服务质量
        publish: "",
        publishMsg: "Hello World!", // 发布消息
        end: false
      },
      client: {}
    };
  },
  created() {
    console.log("mqtt", mqtt ? "true" : "false");
    this.form = JSON.parse(localStorage.getItem("form"));
    this.options = JSON.parse(localStorage.getItem("options"));
    this.InitConnect();
    this.message();
  },
  components: {},
  methods: {
    InitConnect() {
      // WebSocket 连接字符串
      const WebSocket_URL =
        "ws://" + this.form.ip + ":" + this.form.port + "/mqtt";
      this.client = mqtt.connect(WebSocket_URL, this.options);
      // 连接成功后初始化订阅
      this.client.on("connect", () => {
        console.log("Success Connected to", WebSocket_URL);
        this.$toast.success("成功连接到" + WebSocket_URL);
      });
    },
    message() {
      // 为 message 时间添加处理函数
      this.client.on("message", (topic, message) => {
        console.log("收到来自", topic, "的消息:", message.toString());
        this.optionsTwo.subscribeMsg += message.toString() + "\n";
      });
    },
    subscribe() {
      // 订阅主题
      this.client.subscribe(this.optionsTwo.subscribe, err => {
        console.log(err || "订阅成功");
        this.$toast.success("订阅成功");
      });
    },
    publish() {
      // 发布消息
      this.client.publish(
        this.optionsTwo.subscribe,
        this.optionsTwo.publishMsg,
        err => {
          console.log(err || "发布成功");
          this.$toast.success("发布成功");
        }
      );
    },
    top() {
      this.client.publish(this.optionsTwo.subscribe, "top", err => {
        console.log(err || "发布成功");
      });
    },
    right() {
      this.client.publish(this.optionsTwo.subscribe, "right", err => {
        console.log(err || "发布成功");
      });
    },
    stop() {
      this.client.publish(this.optionsTwo.subscribe, "stop", err => {
        console.log(err || "发布成功");
      });
    },
    left() {
      this.client.publish(this.optionsTwo.subscribe, "left", err => {
        console.log(err || "发布成功");
      });
    },
    bottom() {
      this.client.publish(this.optionsTwo.subscribe, "bottom", err => {
        console.log(err || "发布成功");
      });
    },
    end() {
      // 断开连接
      this.$confirm("确定要断开连接？", "提示", {
        type: "warning"
      }).then(({ result }) => {
        if (result) {
          this.client.end();
          localStorage.setItem("form", "");
          localStorage.setItem("options", "");
          this.$toast.success("断开连接");
          this.$router.push("./login");
        } else {
        }
      });
    }
  }
};
</script>
